<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>首页</title>
</head>

<body class="d_f fdcolumn">
    <main class="flex">
        <div id="banner" class="mb16">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="../img/119.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../img/136.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../img/sky.jpg" alt=""></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="hppadding">
            <div class="row-container d_f mb16">
                <div class="row-card-ranking mr16 bradius15 prv">
                    <p class="c0E7 f20">今日排名</p>
                    <p id="rankCount" class="rank-count cfff pabs f60">9</p>
                </div>
                <div class="row-card-sum bradius15 prv">
                    <p class="c0E7 f20">累积打卡<span id="punchSum"></span>天</p>
                    <button class="pabs c0E7 tcenter" id="checkBtn">今日打卡</button>
                </div>

            </div>
            <div class=" d_f row_middle mb16">
                <div class="row_data mr16 bradius15 bgStyle bgsize">
                    <p class="cfff hppCommon">运动数据</p>
                </div>
                <div class="row_badge prv bradius15">
                    <p class="c0E7 hppCommon">累计运动徽章</p>
                    <div class="pabs"><span class=" f60" id="badge"></span>枚</div>
                </div>
            </div>
            <div class="tranining bgStyle bgsize mb16 bradius15">
                <p class="cfff hppCommon">课程训练</p>
            </div>
            <div class="outrunning bgStyle bgsize bradius15 mb16">
                <p class="cfff hppCommon">户外跑步</p>
            </div>
        </div>
    </main>

</body>

</html>